<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm">
    <el-form-item label="商品名称" prop="goods_name">
      <el-input v-model.trim="ruleForm.goods_name"></el-input>
    </el-form-item>
    <el-form-item label="商品价格" prop="goods_price">
      <el-input v-model.trim="ruleForm.goods_price"></el-input>
    </el-form-item>
    <el-form-item label="商品重量" prop="goods_weight">
      <el-input v-model.trim="ruleForm.goods_weight"></el-input>
    </el-form-item>
    <el-form-item label="商品数量" prop="goods_number">
      <el-input v-model.trim="ruleForm.goods_number"></el-input>
    </el-form-item>
    <el-form-item class="mb40px" label="商品分类" prop="goods_cat">
      <el-cascader
        v-if="isShow"
        v-model="valueArr"
        :options="options"
        :props="{
                expandTrigger: 'hover',
                value:'cat_id',
                label:'cat_name'
              }"
        @change="handleChange">
      </el-cascader>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'Information',
  methods: {
    handleChange (value) {
      // console.log(value)
      if (value.length === 3) {
        this.ruleForm.goods_cat = value.join(',')
      } else {
        this.$message({
          type: 'error',
          message: '必须选择有三级分类的项目'
        })
        this.ruleForm.goods_cat = ''
        this.valueArr = []
        this.isShow = false
        setTimeout(() => {
          this.isShow = true
        }, 0)
      }
    }
  },
  data () {
    return {
      valueArr: [1, 3, 6],
      isShow: true,
      rules: {
        goods_name: [
          {
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }
        ],
        goods_price: [
          {
            required: true,
            message: '请输入商品价格',
            trigger: 'blur'
          }
        ],
        goods_weight: [
          {
            required: true,
            message: '请输入商品重量',
            trigger: 'blur'
          }
        ],
        goods_number: [
          {
            required: true,
            message: '请输入商品数量',
            trigger: 'blur'
          }
        ],
        goods_cat: [
          {
            required: true,
            message: ' ',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  props: {
    options: Array,
    valueId: [Number, String],
    ruleForm: Object
  },
  watch: {
    valueArr: {
      deep: true,
      handler (value) {
        console.log(value)
        if (value.length === 3) {
          this.$emit('update:valueId', value[2])
          this.$emit('getCategories')
        } else {
          this.$emit('update:valueId', '')
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-form-item__label {
  padding-bottom: 10px;
}

/deep/ .mb40px {
  margin-bottom: 72px;

}

/deep/ .el-form-item__content {
  position: relative;

  .el-cascader {
    top: 50px;
    left: 0;
    position: absolute;
  }

}
</style>
